﻿<!DOCTYPE html>
<html>
<head>
    <title>CGI</title>
</head>
<body>
    <h1>Our Page</h1>
    <script>
        //01

        var updateZipCode = function () {
            console.log(this);
        };
        //directly calling the function, we get window here
        updateZipCode();
        //using "call()" and within the parenthesis we pass empty object
        //we get our empty object here
        updateZipCode.call({});
        //now we pass an property for object
        //here object becomes "this" within the function
        updateZipCode.call({ zip: '11787' });

        //02
        //refined example
        //calling call with some variable "zipCode"
        /*
        var updateZipCode = function () {
            console.log(this);
        };
        var zipCode = {
            zip: '11787'
        };
        updateZipCode.call(zipCode);
        */

        //03
        //here we seperate the arguments after our object "zipCode" separated by commas
        /*
        var updateZipCode = function (newZip, country) {
            console.log(newZip + ' ' + country);
        };
        var zipCode = {
            zip: '11787'
        };
        updateZipCode.call(zipCode, '11888', 'US');
        //here we use "apply" and we can pass array of arguments rather then comma separated, broke down into newZip & country
        updateZipCode.apply(zipCode, ['11888', 'US']);
        //error, with "apply" always need to pass array and with "call", comma separated arguments
        updateZipCode.apply(zipCode, '11888', 'us');
        */
    </script>
</body>
</html>